<template>
  <div class="bgbox">
    <quitLogin @exitCilck="exitCilck" />

    <!-- <van-nav-bar left-text="返回"
                 left-arrow
                 style="height:25px"
                 :border='false'
                 @click-left="onClickLeft" /> -->

    <img src="@/assets/images/bg2.png"
         class="bgimg">
    <div class="dhbox">
      <div class="label">联系电话</div>
      <div>
        <input type="text"
               v-model="phone">
      </div>
    </div>
    <div class="dhbox"
         style="margin-top:10px">
      <div class="label">预约地址</div>
      <div>
        <input type="text"
               v-model="address">
      </div>
    </div>
    <!-- 套餐选择 -->
    <div class="dhbox"
         style="margin-top:10px">
      <div class="label"
           style="margin-bottom:15px">套餐选择</div>
      <!-- 1 -->
      <div class="selectbox">
        <div class="playbox">
          <van-icon name="play" />承诺使用12个月千兆宽带(5折),每月35元
        </div>
        <div>亨套餐组合（三选一）</div>
        <van-radio-group v-model="checked"
                         direction="horizontal"
                         style="margin-top:10px">
          <van-radio shape="square"
                     v-for="(item) in checkedLink"
                     :key="item"
                     :name="item"
                     @click="ctClick(1)"
                     icon-size="14px"><span style="color:#fff">{{item}}</span></van-radio>
        </van-radio-group>
      </div>
      <!-- 2/ -->
      <div class="selectbox"
           style="margin-top:30px">
        <div class="playbox">
          <van-icon name="play" />承诺使用12个月千兆宽带,每月70元
        </div>
        <div>亨套餐组合（三选一）</div>
        <van-radio-group v-model="checkedTow"
                         style="margin-top:10px">
          <van-radio shape="square"
                     style="margin:5px"
                     v-for="(item) in checkedLinkTow"
                     :key="item"
                     :name="item"
                     @click="ctClick(2)"
                     icon-size="14px"><span style="color:#fff">{{item}}</span></van-radio>
        </van-radio-group>
      </div>
    </div>
    <!-- 规则 -->
    <rulePage :rests='123' />
    <!-- 提交 -->
    <div class="referbox">
      <img src="@/assets/images/but2.png"
           alt=""
           @click="referClick">
    </div>

  </div>
  <!-- 弹框 -->
  <van-overlay v-model:show="imgshow">
    <div class="tk-box">
      <img src="@/assets/images/tk.png"
           alt="" />
      <div class="tktext">1.选择合适产品后，填写预约信息。2个工作日内有专人电话确认上门时间。<br />
        2.智家工程师上门办理千兆宽带业务及配送智能产品。<br />
        3.组合包含千兆宽带和家庭网络调优上门服务。
      </div>
      <div class="affirmbox"
           @click="affirmClick">确认</div>
    </div>
  </van-overlay>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import rulePage from '@m/rule/index.vue'
import quitLogin from '@m/quitLogin/index.vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'
import config, { MODE } from '@/config'
import { message } from 'ant-design-vue'

// 格式化日期的
import { formatDate } from '@/utils/common'
import userApi from '@/api/mobile_user/index'
import { Toast, Dialog } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'

export default defineComponent({
  name: 'Login',
  components: { rulePage, quitLogin },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const imgshow: any = ref(false)
    const state: any = reactive({
      num: 589,
      setMealNum: 123,
      checked: '',
      phone: '',
      address: '',
      checkedLink: ['WiFi6路由器', '智能门铃', '触碰音箱'],
      checkedTow: '',
      checkedLinkTow: [
        'WiFi6路由器+智能门铃',
        '触碰音箱+智能门铃',
        '触碰音箱+智能床头灯+智能温度计'
      ]
    })
    function affirmClick() {
      console.log('确认')
      imgshow.value = false
    }
    // 选择套餐
    function ctClick(num) {
      console.log(num, 'sds')
      if (num == 1) {
        state.checkedTow = ''
      } else {
        state.checked = ''
      }
    }
    // 提交
    function referClick() {
      console.log('提交')
      if (!config.validatePhoneRule.test(state.phone)) {
        message.warning('请输入正确的手机号码')
        return
      }
      if (!state.address) {
        message.warning('请输入地址')
        return
      }
      if (!state.checked && !state.checkedTow) {
        message.warning('请勾选套餐')
        return
      }
      imgshow.value = true
      let req = {
        status: 1,
        bustype: 2,
        combo: state.checked == '' ? state.checkedTow : state.checked,
        contactPhone: state.phone,
        address: state.address,
        buttonName: '点击提交预约',
        // userPhone: '13926303401' // 记得改
        userPhone: localStorage.getItem('h5phone')
      }
      userApi.getSubscribe(req).then((res) => {
        console.log(res, 'dddddddd')
        // Webapph5.pushTrack({ eventmsg: '安防-点击提交预约', eventid: state.phone })
      })
    }
    function onClickLeft() {
      router.go(-1)
    }
    function exitCilck() {
      Storage.remove(MOBILE_TOKEN)
      router.push({
        name: 'weChatActivity'
      })
    }
    // 关闭
    onMounted(() => {
      window.scroll(0, 0)
    })

    return {
      ...toRefs(state),
      imgshow,
      onClickLeft,
      referClick,
      ctClick,
      affirmClick,
      exitCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.bgbox {
  position: relative;
  width: 100%;
  margin: 0;
  background: #ab0f08;
  padding-bottom: 20px;
  .bgimg {
    width: 375px;
  }
  .dhbox {
    padding: 0 20px;
    .label {
      color: #fff;
      padding: 2px 0;
    }
    input {
      width: 250px;
      outline-style: none;
      border: none;
      border-radius: 5px;
    }
    .selectbox {
      position: relative;
      padding: 15px;
      border: 1px solid #fbf4f4;
      border-radius: 5px;
      color: #fff;
      .playbox {
        position: absolute;
        padding: 0 15px;
        background: #ab0f08;
        top: -10px;
        left: -18px;
      }
    }
  }

  .referbox {
    text-align: center;
    padding: 20px;
    img {
      width: 130px;
    }
  }
}
.tk-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  img {
    width: 330px;
  }
  .tktext {
    position: absolute;
    width: 280px;
    font-size: 12px;
    font-weight: 600;
    margin-top: -30px;
    line-height: 13px;
    color: #000;
  }
  .affirmbox {
    position: absolute;
    margin-top: 100px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 16px;
    background: #ab0f08;
    border-radius: 20px;
    text-align: center;
  }
}
// ::-webkit-scrollbar {
//   // 直接复制黏贴到样式页.css，完美解决
//   display: none;
//   width: 0px;
// }
</style>
